import { useStore } from '@/hooks';
import { Form } from '@alifd/next';
import React, { useEffect, useState } from 'react';
import { FieldsGrid, TitleGrid } from '../../stores/definitions_order';
import { t } from '@lingui/macro';
import { observer } from 'mobx-react-lite';
import RoadDetailInfo from './RoadDetailInfo';


const OrderInfo = (props) => {
  const { orderId } = props;
  const [formData, setFormData] = useState({});
  const { ccTaskStore: store } = useStore();

  useEffect(() => {
    (async () => {
      const order = await store.getOrderInfo(orderId);
      const task = await store.getTask(order);
      setFormData({ ...order, TASK: task });
    })();
  }, [orderId]);

  if (_.isEmpty(formData)) return <></>;

  return (
    <Form
      inline
      isPreview
      value={formData}
      useLabelForErrorMessage
    >
      <TitleGrid title={t`基本信息`} />
      <FieldsGrid
        formData={formData}
        mode="view"
        fields={['orderNumber', 'ccOrder.orderStatus', 'company.name', 'ccOrder.rootPrice', 'price', 'discountPrice', 'crDate', 'ccOrder.payType', 'ccOrder.payTime', 'ccOrder.priceDifference', 'orderTypeName', 'ccOrder.orderFromType', 'ccOrder.language', 'orderOptionTypeName', 'currency', 'price', 'refundInfos[0].state', 'refundInfos[0].refundPrice']}
      />

      <TitleGrid title={t`客户资料`} />
      <FieldsGrid
        formData={formData}
        mode="view"
        fields={['ccOrder.passengerName', 'ccOrder.passengerPhone', 'ccOrder.subscribeName', 'ccOrder.subscribePhone', 'partnerName']}
      />

      <TitleGrid title={t`乘坐信息`} />
      <FieldsGrid
        formData={formData}
        mode="view"
        fields={['beginAreaName', 'ccOrder.beginName', 'endAreaName', 'ccOrder.endName', 'ccOrder.predictBeginDate', 'ccOrder.predictTime', 'ccOrder.mileage', 'ccOrder.isPass', 'ccOrder.isMap', 'ccOrder.number', 'ccOrder.flightNumber', 'ccOrder.numberOfLuggage']}
      />

      <TitleGrid title={t`承运信息`} />
      <RoadDetailInfo
        formData={formData}
      />

      <TitleGrid title={t`备注及照片`} />
      <FieldsGrid
        formData={formData}
        mode="view"
        fields={['ccOrder.remarks', 'refundInfos[0].cancelRemark', 'orderChangeRemarks']}
      />

    </Form>
  );
};

export default observer(OrderInfo);
